<template>
    <view class="pub_page pub_page_bg pub_chat_info pub_header_padding">
        <pub-head headerName="chat_info" :headerConfig="headerConfig" @headerBack="headerBack"></pub-head>
        <div class="pub_page_scroll page_box">
            <z-paging ref="Zpaging" class="chat_lis_div" v-model="chatList" use-chat-record-mode safe-area-inset-bottom
                :auto-adjust-position-when-chat="false" :hide-empty-view="true" :fixed="false" bottom-bg-color="#F9F9F9"
                @query="getChatList" @keyboardHeightChange="keyboardHeightChange" @hidedKeyboard="hidedKeyboard" auto>
                <view slot="top">
                    <view v-if="chatGroupOtherInfo.notification" class="group_notification"
                        @click="openGroupNotification">
                        <div class="txt">
                            <div class="p">公告内容：{{ chatGroupOtherInfo.notification }}</div>
                            <text class="right icon-font-basic icon-b-arrow-1-2"></text>
                        </div>
                    </view>
                </view>
                <div class="chat_li" style="transform: scaleY(-1)" :class="[li.from==userInfo.userId?'chat_li_me':'']"
                    v-for="(li, key) in chatList" :key="key">
                    <div class="time" v-if="li.timeShow">{{ $comFun.getTimeTxt('chat_time_deal',li.time) }}</div>
                    <div class="time" v-if="li.type=='TIMCustomElem'">{{ li.payload.data }}</div>
                    <div class="time" v-if="li.type=='TIMGroupTipElem'">{{ li.groupTipsTxt }}</div>
                    <div class="time" v-if="li.isRevoked">消息已被管理员撤回</div>
                    <div class="content_div" v-if="li.type!='TIMCustomElem'&&li.type!='TIMGroupTipElem'&&!li.isRevoked"
                        @longpress="(data)=>contentLongpress(li, key,data)">
                        <pub-image class="headimg" :src="li.avatar" :mode="'aspectFill'"
                            @imgClick="userClick(li)"></pub-image>
                        <div class="content">
                            <div class="name" v-if="chatType==2">{{ li.nick }}</div>
                            <!-- <div class="text" v-if="li.type=='TIMTextElem'">{{ li.payload.text }}</div> -->
                            <rich-text v-if="li.type=='TIMTextElem'" class="text bq_img_css_big"
                                :nodes="li.payload.textShow"></rich-text>
                            <div class="image" :class="[`image_${li.payload.imageInfo.showType}`]"
                                :style="{height:li.payload.imageInfo.boxHeight}" v-if="li.type=='TIMImageElem'"
                                @click="$comFun.toPreviewImage(li.payload.imageInfo.url,[li.payload.imageInfo.url])">
                                <pub-image class="img" :src="li.payload.imageInfo.url" :mode="'widthFix'"></pub-image>
                            </div>
                            <div class="video" :style="{height:li.payload.boxHeight}" v-if="li.type=='TIMVideoFileElem'"
                                @click="$comFun.openWin('/pages/chat/video',{videoUrl:li.payload.videoUrl})">
                                <!-- <video :src="li.payload.videoUrl"></video> -->
                                <pub-image class="img" :src="li.payload.snapshotUrl" :mode="'widthFix'"></pub-image>
                                <span class="play icon-font-basic icon-b-video-play"></span>
                            </div>
                            <div class="sound" v-if="li.type=='TIMSoundElem'" @click="soundPlay(li)">
                                <div class="icon" :class="[audioPlayMessageId==li.ID?'icon_play':'']"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部聊天输入框 -->
                <template #bottom>
                    <div v-if="isShowInput">
                        <chatBottom ref="inputBar" @chatBottomSend="chatBottomSend" :chatType="chatType"
                            :chatUserInfo="chatUserInfo" :userInfo="userInfo" />
                    </div>
                    <div class="bottom_no_div" v-if="headerConfig.right_type==0">
                        {{ chatType==1?'还不是好友哦':'还不是群成员哦' }}
                    </div>
                    <div class="bottom_no_div"
                        v-if="chatGroupOtherInfo.muteAllMembers&& chatGroupOtherInfo.ownerID != userInfo.userId">
                        {{ '全员禁言中' }}
                    </div>
                </template>
            </z-paging>
        </div>
    </view>
</template>

<script>
import chatBottom from '@/pages/chat/components/chat-bottom.vue'
import { replaceEmote } from '@/pages/chat/emote/emote.js';
export default {
    components: { chatBottom },
    data() {
        return {
            headerConfig: {
                header_color: '#F9F9F9',//标题栏背景色
                title: '',//标题栏内容
                left_type: 3,
                title_type: 2,
                right_type: -1,
                right_content: '../../static/aimg/img_11.png'
            },

            chatList: [],
            nextReqMessageID: '',//获取下一次聊天记录的标识
            userInfo: {},

            chatType: 1,//1单聊  2群聊
            chatUserInfo: {},//单聊时 用户信息
            chatGroupInfo: {},//群聊时 群聊信息
            conversationID: '',

            chatGroupOtherInfo: {
                ownerID: '',
                muteAllMembers: false,//是否全员禁言
                notification: '',//群公告
            },

            innerAudioContext: '',
            audioPlayMessageId: '',//音频播放的消息ID
        };
    },
    computed: {
        isShowInput() {
            return this.headerConfig.right_type == 2 && (this.chatGroupOtherInfo.muteAllMembers == false || this.chatGroupOtherInfo.muteAllMembers == true && this.chatGroupOtherInfo.ownerID == this.userInfo.userId)
        }
    },
    onLoad(options) {
        // console.log(111, options);
        this.userInfo = this.$comFun.getUserInfo();
        this.chatType = Number(options.chatType) || 1;
        const that = this;
        if (that.chatType == 1) {
            that.chatUserInfo = options.chatUserInfo ? JSON.parse(options.chatUserInfo) : {};
            if (that.chatUserInfo == '') return;
            that.headerConfig.title = that.chatUserInfo.userName;
            that.getRelation();
            that.conversationID = `C2C${that.chatUserInfo.userId}`;
        } else if (that.chatType == 2) {
            that.chatGroupInfo = options.chatGroupInfo ? JSON.parse(options.chatGroupInfo) : {};
            if (that.chatGroupInfo == '') return;
            that.headerConfig.title = that.chatGroupInfo.groupName;
            console.log("chatGroupInfo", that.chatGroupInfo);
            that.getRelation();
            that.conversationID = `GROUP${that.chatGroupInfo.groupId}`;
            this.getGroupInfo();
        }
        // 消息监听
        that.$txChat.on(that.$TencentCloudChat.EVENT.MESSAGE_RECEIVED, that.onMessageReceived);
        // 收到消息被撤回的通知
        that.$txChat.on(that.$TencentCloudChat.EVENT.MESSAGE_REVOKED, that.onMessageRevoke);

        uni.$on('clear_message_back', () => {
            that.chatList = [];
        })
        uni.$on('chatSetFriendRemark', (res) => {
            that.headerConfig.title = res.remark;
        })
    },
    onShow() {
        if (this.chatGroupInfo != '' && this.chatType == 2) {
            this.getGroupInfo();
        }
    },
    onUnload() {
        console.log("chat-info-onUnload", this.$TencentCloudChat.EVENT.MESSAGE_RECEIVED);
        // 移除  消息监听
        this.$txChat.off(this.$TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
        // 移除  消息被撤回的通知
        this.$txChat.off(this.$TencentCloudChat.EVENT.MESSAGE_REVOKED, this.onMessageRevoke);
    },
    methods: {
        getGroupInfo() {
            const that = this;
            that.$txChat.getGroupProfile({
                groupID: that.chatGroupInfo.groupId
            }).then(function (imResponse) {
                console.log("chat-getGroupProfile", imResponse.data.group);
                const info = imResponse.data.group;
                let memberCount = info.memberCount || 0;
                that.headerConfig.title = `${that.chatGroupInfo.groupName}（${memberCount}）`;
                that.chatGroupOtherInfo = {
                    ownerID: info.ownerID,
                    muteAllMembers: info.muteAllMembers,//是否全员禁言
                    notification: info.notification
                };
            }).catch(function (imError) {
                console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
            });
        },
        onMessageReceived: function (event) {
            const that = this;
            console.log("chat-onMessageReceived", event);
            if (event && event.data) {
                event.data.forEach(li => {
                    if (li.conversationID == that.conversationID) {
                        that.addChatData(li);
                    }
                })
                that.messageAsRead();
            }
        },
        onMessageRevoke(event) {
            console.log('被撤回的通知', event);
            let list = event?.data || [];
            this.chatList.forEach(li => {
                let find = list.find(lli => {
                    return lli.ID == li.ID;
                })
                if (find) {
                    li.isRevoked = true;
                }
            })
        },
        getChatList() {
            const that = this;
            let param = {
                conversationID: that.conversationID
            };
            if (this.chatList.length > 0) {
                param.nextReqMessageID = that.nextReqMessageID;
                if (that.nextReqMessageID == '') {
                    that.$refs.Zpaging.complete([]);
                    return;
                }
            }
            let promise = that.$txChat.getMessageList({
                ...param
            });
            promise.then(function (imResponse) {
                console.log("chat-getMessageList", imResponse);
                that.nextReqMessageID = imResponse.data.nextReqMessageID;
                const messageList = imResponse.data.messageList; // 消息列表。
                that.dealChatList(messageList);

                that.messageAsRead();
                // const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
            });
        },
        dealChatList(messageList) {
            const that = this;
            let list = [];
            if (messageList.length == 0) {
                that.$refs.Zpaging.complete([]);
                return;
            }
            messageList.forEach((li, key) => {
                list[key] = li;
                let info = that.dealChatInfo(li, key == 0 ? '' : messageList[key - 1]);
                list[key] = info;
            })
            that.$refs.Zpaging.complete(list.reverse());
        },
        // 监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效（如果不需要切换表情面板则不用写）
        keyboardHeightChange(res) {
            if (this.$refs.inputBar) {
                this.$refs.inputBar.updateKeyboardHeightChange(res);
            }
        },
        // 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
        hidedKeyboard() {
            if (this.$refs.inputBar) {
                this.$refs.inputBar.hidedKeyboard();
            }
        },
        chatBottomSend(data) {
            if (data.type == 'text') {
                this.toSend('text', data.content);
            } else if (data.type == 'image') {
                this.toSend('image', data.imageRes);
            } else if (data.type == 'video') {
                this.toSend('video', data.videoInfo);
            } else if (data.type == 'speech') {
                this.toSend('speech', data.speechSrc);
            }
        },
        toSend(type, info) {
            console.log('发送消息', type, info);
            const that = this;
            let param = {}
            if (this.chatType == 1) {
                param.to = that.chatUserInfo.userId;
                param.conversationType = that.$TencentCloudChat.TYPES.CONV_C2C;
            } else if (this.chatType == 2) {
                param.to = that.chatGroupInfo.groupId;
                param.conversationType = that.$TencentCloudChat.TYPES.CONV_GROUP;
            }
            let message = '';
            if (type == 'text') {
                param.payload = {
                    text: info
                }
                message = that.$txChat.createTextMessage(param);
            } else if (type == 'image') {
                param.payload = {
                    file: info
                }
                message = that.$txChat.createImageMessage(param);
            } else if (type == 'video') {
                param.payload = {
                    file: info
                }
                message = that.$txChat.createVideoMessage(param);
            } else if (type == 'speech') {
                param.payload = {
                    file: info
                }
                message = that.$txChat.createAudioMessage({
                    ...param,
                    onProgress: function (event) { console.log('file uploading:', event) }
                });
            }
            if (message == '') return;
            let promise = that.$txChat.sendMessage(message);
            promise.then(function (imResponse) {
                let { message } = imResponse.data;
                // 发送成功
                console.log("chat-sendMessage", imResponse);
                that.addChatData(message);
            }).catch(function (imError) {
                if (imError == 'Error: this group has been forbidden to speak') {
                    that.$comFun.toast('全员禁言中');
                    that.chatGroupOtherInfo.muteAllMembers = true;
                } else {
                    // 发送失败
                    that.$comFun.toast('发送失败，请稍后再试');
                }
            });
        },
        // 增加一条聊天记录，自己发送或者收到消息
        async addChatData(info) {
            info = this.dealChatInfo(info, this.chatList.length != 0 ? this.chatList[0] : '');

            this.$refs.Zpaging.addChatRecordData(info);
        },
        dealChatInfo(li, li_last) {
            // 处理显示时间，两条记录时间间隔小于2分钟就不显示时间
            li = JSON.parse(JSON.stringify(li));
            li.timeShow = true;
            if (li_last && Math.abs(li.time - li_last.time) < 60 * 2) {
                li.timeShow = false;
            }

            // 处理自定义消息
            if (li.type == 'TIMCustomElem') {
                // li.customElem.data = JSON.parse(li.customElem.data);
                li.payload.data = this.fhandleCallKitSignaling(li);
            }
            // 处理图片消息
            if (li.type == "TIMImageElem") {
                let find = li.payload.imageInfoArray.find(li => {
                    return li.type == 0;
                })
                li.payload.imageInfo = find ? {
                    url: find.url,
                    width: find.width,
                    height: find.height,
                    showType: find.width > find.height ? 1 : 2,
                    boxHeight: find.width > find.height ? `calc(${find.height} * 50vw / ${find.width})` : `calc(${find.height} * 30vw / ${find.width})`
                } : ''
            }
            if (li.type == "TIMVideoFileElem") {
                let videoInfo = li.payload;
                li.payload.boxHeight = `calc(${videoInfo.snapshotHeight} * 50vw / ${videoInfo.snapshotWidth})`;
            }
            if (this.chatType == 2 && li.type == 'TIMGroupTipElem') {
                // 处理群tips消息
                let operationType = li.payload.operationType;
                // 群tips消息(type:1有成员加群  2有群成员退群  3有群成员被踢出群  4有群成员被设为管理员
                // 5有群成员被撤销管理员   6群组资料变更   7群成员资料变更，例如：群成员被禁言)
                li.groupTipsTxt = '';
                let tips = ['', '加入群聊', '退出群聊', '被踢出群聊', '', '', '修改了群信息', ''];
                if ([1, 2, 3].indexOf(operationType) != -1) {
                    let memberList = li.payload.memberList ? li.payload.memberList.map(li => {
                        return li.nick;
                    }) : [];
                    li.groupTipsTxt = `${memberList.join("、")}${tips[operationType]}`
                }
                if ([6].indexOf(operationType) != -1) {
                    li.groupTipsTxt = `${li.nick}${tips[operationType]}`
                }
                console.log(11, operationType, li.groupTipsTxt);
            }
            if (li.type == 'TIMTextElem') {
                li.payload.textShow = replaceEmote(li.payload.text);
            }
            return li;
        },
        fhandleCallKitSignaling(message) {
            try {
                const callMessage = JSON.parse(message.payload.data);
                if (callMessage?.businessID !== 1) {
                    return '';
                }
                const objectData = JSON.parse(callMessage?.data);
                let inviteeList = '';
                callMessage?.inviteeList?.forEach((userID) => {
                    inviteeList += `${userID}、`;
                });
                inviteeList = inviteeList.substring(0, inviteeList.lastIndexOf('、'));
                const userID = message.fromAccount || message.from; // 取 message.fromAccount 兼容会话 lastMsg
                let messageSender = message.nameCard || message.nick || userID;
                messageSender = messageSender.length > 12 ? `${messageSender.slice(0, 12)}...` : messageSender;
                switch (callMessage?.actionType) {
                    case 1: {
                        if (objectData?.data?.cmd === 'audioCall' || objectData?.data?.cmd === 'videoCall') {
                            if (callMessage?.groupID) {
                                return `${messageSender} 发起通话`;
                            }
                        }
                        if (objectData?.data?.cmd === 'hangup') {
                            if (callMessage?.groupID) {
                                return '通话结束';
                            }
                            return `通话时长：${this.$comFun.getTimeDiffTxt(objectData?.call_end)}`;
                        }
                        if (objectData?.data?.cmd === 'switchToAudio') {
                            return '切换语音通话';
                        }
                        if (objectData?.data?.cmd === 'switchToVideo') {
                            return '切换视频通话';
                        }
                        // CDM 异常时【发起通话】作为默认返回值
                        return '发起通话';
                    }
                    case 2:
                        if (callMessage?.groupID) {
                            return `${messageSender} 取消通话`;
                        }
                        return '取消通话';
                    case 3:
                        if (objectData?.data?.cmd === 'switchToAudio') {
                            return '切换语音通话';
                        }
                        if (objectData?.data?.cmd === 'switchToVideo') {
                            return '切换视频通话';
                        }
                        if (callMessage?.groupID) {
                            return `${messageSender} 已接听`;
                        }
                        return '已接听';
                    case 4:
                        if (callMessage?.groupID) {
                            return `${messageSender} 拒绝通话`;
                        }
                        return '拒绝通话';
                    case 5:
                        if (objectData?.data?.cmd === 'switchToAudio') {
                            return '切换语音通话';
                        }
                        if (objectData?.data?.cmd === 'switchToVideo') {
                            return '切换视频通话';
                        }
                        if (callMessage?.groupID) {
                            return `${inviteeList} 无应答`;
                        }
                        return '无应答';
                    default:
                        return '';
                }
            } catch (error) {
                console.error(error);
                return '';
            }
        },
        headerBack(data) {
            if (data.type == 'right') {
                let data = {};
                if (this.chatType == 1) {
                    data = {
                        chatUserInfo: JSON.stringify(this.chatUserInfo)
                    }
                } else if (this.chatType == 2) {
                    data = {
                        chatGroupInfo: JSON.stringify(this.chatGroupInfo)
                    }
                } else {
                    return;
                }
                this.$comFun.openWin('/pages/chat/more', {
                    chatType: this.chatType,
                    ...data
                });
            }
        },
        messageAsRead() {
            const that = this;
            let conversationID = that.conversationID;
            // 已读操作
            that.$txChat.setMessageRead({
                conversationID: conversationID
            }).then(function (imResponse) {
                console.log("chat-setMessageRead", imResponse);
            }).catch(function (imError) {
                // 发送群消息已读回执失败
                console.log("chat-setMessageRead", imError);
            });
        },
        // 获取好友关系，或者是否在群聊中
        getRelation() {
            const that = this;
            if (that.chatType == 1) {
                // 检测好友关系
                console.log(1, that.userInfo.userId, that.chatUserInfo.userId);
                let promise = that.$txChat.checkFriend({
                    userIDList: [that.chatUserInfo.userId],
                    type: that.$TencentCloudChat.TYPES.SNS_CHECK_TYPE_SINGLE,
                });
                promise.then(function (imResponse) {
                    console.log("chat-checkFriend", imResponse);
                    const { successUserIDList } = imResponse.data;
                    if (successUserIDList[0].relation == that.$TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B) {
                        that.headerConfig.right_type = 2;
                    } else {
                        that.headerConfig.right_type = 0;
                    }
                    // // 校验成功的 userIDList
                    // successUserIDList.forEach((item) => {
                    //     const { userID, code, relation } = item; // 此时 code 始终为0
                    //     // 单向校验好友关系时可能的结果有：
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION A 的好友表中没有 B，
                    //     // 但无法确定 B 的好友表中是否有 A
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B A 的好友表中有 B，但无法确定 B 的好友表中是否有 A
                    //     // 双向校验好友关系时可能的结果有：
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION A 的好友表中没有 B，B 的好友表中也没有 A
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B A 的好友表中有 B，但 B 的好友表中没有 A
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_B_WITH_A A 的好友表中没有 B，但 B 的好友表中有 A
                    //     // - relation: TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY A 的好友表中有 B，B 的好友表中也有 A
                    // });
                    // // 校验失败的 userIDList
                    // failureUserIDList.forEach((item) => {
                    //     const { userID, code, message } = item;
                    // });
                }).catch(function (imError) {
                    console.warn('checkFriend error:', imError);
                    that.headerConfig.right_type = 0;
                });
            } else if (that.chatType == 2) {
                // 获取当前用户是否在这个群中
                let promise = that.$txChat.getGroupMemberProfile({
                    groupID: that.chatGroupInfo.groupId,
                    userIDList: [that.userInfo.userId],
                    // memberCustomFieldFilter: ['group_member_custom'], // 筛选群成员自定义字段：group_member_custom
                });
                promise.then(function (imResponse) {
                    console.log("chat-getGroupMemberProfile", imResponse.data.memberList); // 群成员列表
                    let memberList = imResponse?.data?.memberList || [];
                    that.headerConfig.right_type = memberList.length > 0 ? 2 : 0;
                }).catch(function (imError) {
                    console.warn('getGroupMemberProfile error:', imError);
                    that.headerConfig.right_type = 0;
                });
            }
        },
        userClick(info) {
            // console.log(info);
            this.$comFun.openWin('/pages/mine/friend_center', { userId: info.from });
        },
        soundPlay(info) {
            if (this.innerAudioContext) {
                try {
                    this.innerAudioContext.pause();
                    this.innerAudioContext.destroy()
                    this.innerAudioContext = null;
                } catch (e) {
                    //TODO handle the exception
                }
            }

            if (this.audioPlayMessageId == info.ID) {
                this.audioPlayMessageId = '';
            } else {
                this.innerAudioContext = uni.createInnerAudioContext();
                this.audioPlayMessageId = info.ID;
                this.innerAudioContext.autoplay = true;
                this.innerAudioContext.src = info.payload.remoteAudioUrl;

                this.innerAudioContext.onPlay(() => {
                    console.log('开始播放');
                });
                this.innerAudioContext.onEnded((res) => {
                    console.log('音频播放结束', res);
                    this.audioPlayMessageId = '';
                });
            }
        },
        contentLongpress(info, key, event) {
            console.log(info, event);
            const that = this;
            let itemList = [];
            // 增加撤回操作
            if (this.chatType == 1 && info.from == this.userInfo.userId) {
                itemList.push('撤回');
            }
            if (this.chatType == 2 && (this.chatGroupOtherInfo.ownerID == this.userInfo.userId || info.from == this.userInfo.userId)) {
                itemList.push('撤回');
            }
            if (info.type == 'TIMTextElem') {
                itemList.push('复制');
            }
            if (itemList.length > 0) {
                uni.showActionSheet({
                    itemList: itemList,
                    success: function (res) {
                        // console.log(111, res);
                        if (itemList[res.tapIndex] == '撤回') {
                            that.revokeMessage(info, key);
                        }
                        if (itemList[res.tapIndex] == '复制') {
                            that.$comFun.toCopy(info.payload.text);
                        }
                    },
                    fail: function (res) {
                        console.log(res.errMsg);
                    }
                });
            }
        },
        // 撤回消息
        revokeMessage(info, key) {
            const that = this;
            // 判断撤回时间
            let now = new Date().getTime();
            // console.log(now, info.time, now - info.time * 1000);
            if (now - info.time * 1000 > 24 * 60 * 60 * 1000) {
                that.$comFun.toast('已超过撤回时间（1天）');
                return;
            }
            // 主动撤回消息
            let promise = that.$txChat.revokeMessage(info);
            promise.then(function (imResponse) {
                // 消息撤回成功
                console.log("chat-revokeMessage", imResponse);
                that.chatList[key].isRevoked = true;
                that.$comFun.toast('撤回成功');
            }).catch(function (imError) {
                // 消息撤回失败
                // that.$comFun.toast(imError);
                that.$comFun.toast('已超过撤回时间（1天）');
                console.log("chat-revokeMessage-error", imError);
            });
        },
        // 打开群公告
        openGroupNotification() {
            this.$comFun.openWin('/pages/chat/group_info', {
                groupInfo: JSON.stringify({
                    ...this.chatGroupOtherInfo,
                    ...this.chatGroupInfo
                }),
                openType: 2,
            })
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/chat.scss";
@import "@/pages/chat/emote/emote.scss";
</style>
